<?php echo $header;?>
<link href="/static/bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="/static/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
<script src="/static/bootstrap/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>

<!-- jPList js and css  -->
<link href="/static/jquery/jquery-plugins/jplist/css/jplist-core.min.css" rel="stylesheet" type="text/css" />
<script src="/static/jquery/jquery-plugins/jplist/js/jplist-core.min.js"></script>

<script src="/static/jquery/jquery-plugins/jplist/js/jplist.textbox-control.min.js"></script>
<link href="/static/jquery/jquery-plugins/jplist/css/jplist-textbox-control.min.css" rel="stylesheet" type="text/css" />

<!-- jplist pagination bundle -->
<script src="/static/jquery/jquery-plugins/jplist/js/jplist.pagination-bundle.min.js"></script>
<link href="/static/jquery/jquery-plugins/jplist/css/jplist-pagination-bundle.min.css" rel="stylesheet" type="text/css" />

<!-- jplist history bundle -->
<script src="/static/jquery/jquery-plugins/jplist/js/jplist.history-bundle.min.js"></script>
<link href="/static/jquery/jquery-plugins/jplist/css/jplist-history-bundle.min.css" rel="stylesheet" type="text/css" />

<!-- preloader -->
<script src="/static/jquery/jquery-plugins/jplist/js/jplist.preloader-control.min.js"></script>
<link href="/static/jquery/jquery-plugins/jplist/css/jplist-preloader-control.min.css" rel="stylesheet" type="text/css" />

<!-- filter dropdown control -->
<script src="/static/jquery/jquery-plugins/jplist/js/jplist.filter-dropdown-bundle.min.js"></script>

<link href="/static/bootstrap/css/bootstrap-switch.css" rel="stylesheet">
<script src="/static/bootstrap/js/bootstrap-switch.min.js"></script>
<script src="/static/handlebars-v3.0.3.js"></script>

<link href="/static/bootstrap/css/bootstrap-switch.css" rel="stylesheet">
<link href="/static/admin/auth/user/index.css" rel="stylesheet">
<script src="/static/bootstrap/js/bootstrap-switch.min.js"></script>
<script src="/static/jquery/jquery-plugins/ypf-tools.js"></script>
<script src="/static/jquery/jquery-plugins/ypf-taber.js"></script>
<script src="/static/layer/layer.js"></script>
<div class="container-fluid">
    <div class="row">
        <?php echo $slide_common;?>
        <div class="col-sm-4 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h2 class="page-header"><?php echo $title;?></h2>
            <div id="jplist-page-area" class="box jplist">
                <!-- ios button: show/hide panel -->
                <div class="jplist-ios-button">
                    <i class="fa fa-sort"></i>
                    jPList Actions
                </div>
                <div class="row">
                    <span>批量操作：</span>
                    <div class="btn-group" role="group" aria-label="...">
                        <button type="button" class="btn btn-danger"  data-class="action" data-action="batchDelete"    data-url="<?php echo $actions['batchDelete'];?>" data-type="delete">批量删除</button>
                    </div>
                </div>
                <!-- panel -->
                <div class="jplist-panel box panel-top">
                    <div class="row">
                        <div class="text-filter-box">
                            <!--[if lt IE 10]>
                            <div class="jplist-label">标题:</div>
                            <![endif]-->
                            <input
                                    data-path=".title"
                                    data-button="#title-search-button"
                                    type="text"
                                    value=""
                                    placeholder="标题"
                                    data-control-type="textbox"
                                    data-control-name="title"
                                    data-control-action="filter"
                                    />

                            <button
                                    type="button"
                                    id="title-search-button">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                            </button>
                        </div>
                        <div class="text-filter-box">

                            <!--[if lt IE 10]>
                            <div class="jplist-label">描述:</div>
                            <![endif]-->
                            <input
                                    data-path=".title"
                                    data-button="#content-search-button"
                                    type="text"
                                    value=""
                                    placeholder="描述"
                                    data-control-type="textbox"
                                    data-control-name="content"
                                    data-control-action="filter"
                                    />

                            <button
                                    type="button"
                                    id="content-search-button">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                            </button>
                        </div>
                        <div class="text-filter-box">

                            <!--[if lt IE 10]>
                            <div class="jplist-label">添加时间:</div>
                            <![endif]-->
                            <input class="datetimepicker  t_input" style="width:150px;border: 1px solid #ccc" readonly
                                   data-path=".title"
                                   data-button="#create_time-search-button"
                                   type="text"
                                   value=""
                                   placeholder="添加时间"
                                   data-control-type="textbox"
                                   data-control-name="create_time"
                                   data-control-action="filter"
                                    />

                            <button
                                    type="button"
                                    id="create_time-search-button">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                            </button>
                        </div>
                        <div class="text-filter-box">

                            <!--[if lt IE 10]>
                            <div class="jplist-label">更新时间:</div>
                            <![endif]-->
                            <input class="datetimepicker  t_input" style="width:150px;border: 1px solid #ccc" readonly
                                   data-path=".title"
                                   data-button="#update_time-search-button"
                                   type="text"
                                   value=""
                                   placeholder="更新时间"
                                   data-control-type="textbox"
                                   data-control-name="update_time"
                                   data-control-action="filter"
                                    />

                            <button
                                    type="button"
                                    id="update_time-search-button">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                            </button>
                        </div>
                        <div class="text-filter-box">
                            <!--[if lt IE 10]>
                            <div class="jplist-label">类型:</div>
                            <![endif]-->
                            <input
                                    data-path=".title"
                                    data-button="#type-search-button"
                                    type="text"
                                    value=""
                                    placeholder="类型"
                                    data-control-type="textbox"
                                    data-control-name="type"
                                    data-control-action="filter"
                                    />

                            <button
                                    type="button"
                                    id="type-search-button">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                            </button>
                        </div>
                        <div
                                class="jplist-drop-down"
                                data-control-type="filter-drop-down"
                                data-control-name="status"
                                data-control-action="radio">

                            <ul>
                                <li><span data-path="">状态</span></li>
                                <li><span data-path="1">正常</span></li>
                                <li><span data-path="0">禁用</span></li>

                            </ul>
                        </div>
                        <!-- reset button -->
                        <button
                                style="margin-bottom: 10px;"
                                type="button"
                                class="jplist-reset-btn"
                                data-control-type="reset"
                                data-control-name="reset"
                                data-control-action="reset">
                            重置 &nbsp;<span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
                        </button>
                        <button type="button"  data-toggle="modal"
                                data-target="#addLogModal"
                                class="btn btn-primary"
                                data-action="add"
                                data-class="action"
                                data-url="<?php echo $actions['add'];?>">新增</button>
                    </div>
                    <div class="row" style="margin-bottom: 10px;">
                        <div
                                class="jplist-drop-down"
                                data-control-type="items-per-page-drop-down"
                                data-control-name="paging"
                                data-control-action="paging">

                            <ul>
                                <li><span data-number="3"> 每页 3 条 </span></li>
                                <li><span data-number="5"> 每页 5 条 </span></li>
                                <li><span data-number="10"> 每页 10 条 </span></li>
                                <li><span data-number="20" data-default="true"> 每页 20 条 </span></li>
                                <li><span data-number="50"> 每页 50 条 </span></li>
                            </ul>
                        </div>

                        <!-- pagination results -->
                        <div
                                class="jplist-label"
                                data-type="Page {current} of {pages}"
                                data-control-type="pagination-info"
                                data-control-name="paging"
                                data-control-action="paging">
                        </div>

                        <!-- pagination -->
                        <div
                                class="jplist-pagination"
                                data-control-type="pagination"
                                data-control-name="paging"
                                data-control-action="paging">
                        </div>

                        <!-- preloader for data sources -->
                        <div
                                class="jplist-hide-preloader jplist-preloader"
                                data-control-type="preloader"
                                data-control-name="preloader"
                                data-control-action="preloader">
                            <img src="/static/jquery/jquery-plugins/jplist/img/common/ajax-loader-line.gif" alt="Loading..." title="Loading..." />
                        </div>
                    </div>
                </div>

                <!-- ajax content here -->
                <div class=" row">
                    <table data-filter="#filter" class="table table-bordered table-hover" id="LIST" style="margin:0px;">
                        <thead>
                        <tr>
                            <th  data-sort-ignore="true" style="text-align: center;">
                                <input type="checkbox" name="all_batch_ids" value=""/>
                            </th>
                            <th  data-sort-ignore="true" style="text-align: center;" data-class="expand">ID</th>
                            <th  data-sort-ignore="true" style="text-align: center;" data-class="expand">日志标题</th>
                            <th  data-sort-ignore="true" style="text-align: center;" data-class="expand">日志描述</th>
                            <th  data-sort-ignore="true" style="text-align: center;" data-class="expand">添加时间</th>
                            <th  data-sort-ignore="true" style="text-align: center;" data-class="expand">更新时间</th>
                            <th  data-sort-ignore="true" style="text-align: center;" data-class="expand">日志类型</th>
                            <th  data-sort-ignore="true" style="text-align: center;" data-class="expand">日志状态</th>
                            <th  data-sort-ignore="true" style="text-align: center;" data-class="expand">开发人</th>
                            <th data-sort-ignore="true" style="text-align: center;">操作</th>
                        </tr>
                        </thead>
                        <tbody id="jplist_container">

                        </tbody>
                    </table>

                </div>

                <!-- no result found -->
                <div class="box jplist-no-results text-shadow align-center jplist-hidden">
                    <p>暂无结果！</p>
                </div>
                <div class="jplist-panel box panel-bottom" style="margin: 0 0 20px 0">
                    <div
                            class="jplist-drop-down"
                            data-control-type="items-per-page-drop-down"
                            data-control-name="paging"
                            data-control-action="paging">

                        <ul>
                            <li><span data-number="3"> 每页 3 条 </span></li>
                            <li><span data-number="5"> 每页 5 条 </span></li>
                            <li><span data-number="10"> 每页 10 条 </span></li>
                            <li><span data-number="20" data-default="true"> 每页 20 条 </span></li>
                            <li><span data-number="50"> 每页 50 条 </span></li>
                        </ul>
                    </div>

                    <!-- pagination results -->
                    <div
                            class="jplist-label"
                            data-type="Page {current} of {pages}"
                            data-control-type="pagination-info"
                            data-control-name="paging"
                            data-control-action="paging">
                    </div>

                    <!-- pagination -->
                    <div
                            class="jplist-pagination"
                            data-control-type="pagination"
                            data-control-name="paging"
                            data-control-action="paging">
                    </div>

                    <!-- preloader for data sources -->
                    <div
                            class="jplist-hide-preloader jplist-preloader"
                            data-control-type="preloader"
                            data-control-name="preloader"
                            data-control-action="preloader">
                        <img src="/static/jquery/jquery-plugins/jplist/img/common/ajax-loader-line.gif" alt="Loading..." title="Loading..." />
                    </div>

                </div>
            </div>
            <?php echo $footer;?>
        </div>
    </div>
</div>

<div class="modal fade" id="addLogModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

</div>
<script src="/static/jquery/jquery-plugins/ypf-taber.js"></script>
<!-- 加载模板文件 -->
<?php Templater(array(
            'templates/temp_add.html',      //新增
            'templates/temp_edit.html',    //编辑
        ), __DIR__);?>

<script>
    $(function(){
        var template = Handlebars.compile($('#jplist-template').html());
        var jplist_params = {
            jplist_page: $('#jplist-page-area'),
            container_list: $('#jplist_container'),
            jplist_template: $('#jplist-template'),
            dataSource:{
                ajax:{
                    url:"<?php echo $actions['getVersionLogList'];?>"
                },
                //查询数据后，页面渲染方法
                render:function(dataItem, statuses){
                    $('#jplist_container').html( template(dataItem.content) );
                },
                //渲染后，回调方法
                callback:function(){}
            }
        };
        $.YpfTools.render_jplist(jplist_params);

        Handlebars.registerHelper('formatStatus', function(status, status_list , options){
            return status_list[status];
        });

        layer.config({
            skin:'layer-ext-moon',
            extend:'skin/moon/style.css'
        });

        $(document).on('click', 'button',function() {
            var current_action = $(this).attr('data-action');
            var _this = $(this);
            switch (current_action){
                case 'add':
                    $.get(
                        "<?php echo $actions['add'];?>",
                        {},
                        function(res){
                            if(1 == res.status){
                                var handle = Handlebars.compile($('#addLogModal-template').html());
                                $('#addLogModal').html(handle(res.data)).modal('show');
                            }
                        }
                    );
                    break;
                case 'edit':
                    $.get(
                        "<?php echo $actions['edit'];?>",
                        {id:_this.attr('data-id')},
                        function(res){
                            if(1 == res.status){
                                var handle = Handlebars.compile($('#editLogModal-template').html());
                                $('#addLogModal').html(handle(res.data)).modal('show');
                            }
                        }
                    );
                    break;
                case 'saveAdd':
                    $.post(
                        $('#add_log_form').attr('action'),
                        $('#add_log_form').serialize(),
                        function (res) {
                            layer.msg(res.info, {icon:res.status});
                            if(res.status){
                                $('#addLogModal').modal('hide');
                                $.YpfTools.render_jplist(jplist_params);
                            }
                        }
                    );
                    break;
                case 'saveEdit':
                    $.post(
                        $('#edit_log_form').attr('action'),
                        $('#edit_log_form').serialize(),
                        function (res) {
                            layer.msg(res.info, {icon:res.status});
                            if(res.status){
                                $('#addLogModal').modal('hide');
                                $.YpfTools.render_jplist(jplist_params);
                            }
                        }
                    );
                    break;
                case 'delete':
                    layer.confirm('确定要删除？', {icon: 3, title:'提示'}, function(index){
                        //do something
                        if(index){
                            $.post(
                                "<?php echo $actions['delete'];?>",
                                {
                                    id: _this.attr('data-id')
                                },
                                function(res){
                                    layer.msg(res.info, {icon:res.status});
                                    if(1 == res.status){
                                        $.YpfTools.render_jplist(jplist_params);
                                    }
                                }
                            );
                        }
                        return true;
                    });
                    break;
                case 'batchDelete':
                    var checked_list =  $(document).find('input[name^=batch_ids]:checked');
                    if(checked_list.length > 0){
                        layer.confirm('确定要批量删除？', {icon: 3, title:'提示'},
                                function(){
                                    var checked_list =  $(document).find('input[name^=batch_ids]:checked');
                                    var batch_ids = [];
                                    $.each(checked_list, function(){
                                        batch_ids.push($(this).val());
                                    });
                                    //确定
                                    $.post(
                                            "<?php echo $actions['batchDelete'];?>",
                                            {
                                                batch_ids: batch_ids
                                            },
                                            function(res){
                                                layer.msg(res.info, {icon:res.status});
                                                if(1 == res.status){
                                                    $.YpfTools.render_jplist(jplist_params);
                                                }
                                            }
                                    );
                                    return true;
                                },
                                function(){
                                    //取消
                                }
                        );
                    }else{
                        layer.msg('请选择批量操作记录',{icon: 6});
                    }
                    break;
                default:
                    break;
            }
        });

        $('input[name=all_batch_ids]').click(function(){
            if($(this).is(':checked')){
                $(document).find('input[name^=batch_ids]').prop('checked', true);
            }else{
                $(document).find('input[name^=batch_ids]').prop('checked', false);
            }
        });

        $(document).find('.datetimepicker').datetimepicker({
            format:'yyyy-mm-dd hh:ii:ss',
            orientation: "top auto",
            language: "zh",
            todayHighlight: true,
            autoclose: true,
            minView:"day",
            todayBtn:true,
            clearBtn: true,

        });
    });
    
</script>

<!-- Mustache template -->
<script id="jplist-template" type="x-tmpl-mustache">
    {{#data_list}}
        <tr style="" data-id="">
            <td style="vertical-align: middle;">
                <input type="checkbox" name="batch_ids[]" value="{{id}}" />
            </td>
            <td style="text-align: center;">
                {{id}}
            </td>
            <td style="text-align: center;">
                {{title}}
            </td>
            <td style="text-align: center;">
                {{content}}
            </td>
            <td style="text-align: center;">
                {{create_time}}
            </td>
            <td style="text-align: center;">
                {{update_time}}
            </td>
            <td style="text-align: center;">
                {{type}}
            </td>
            <td style="text-align: center;">
                {{{formatStatus status ../status_list}}}
            </td>
            <td style="text-align: center;">
                {{user_id}}
            </td>
            <td style="text-align: center;">
                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default" data-class="action" data-action="edit"  data-id="{{id}}">编辑</button>
                    <button type="button" class="btn btn-danger" data-class="action" data-action="delete" data-id="{{id}}" >删除</button>
                </div>
            </td>
        </tr>
    {{/data_list}}
</script>